<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>山东大学(威海)论坛手机端</title>
	<meta content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" name="viewport" />
	<meta content="yes" name="apple-mobile-web-app-capable" />
	<meta content="black" name="apple-mobile-web-app-status-bar-style" />
	<meta content="telephone=no" name="format-detection" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<link href="css/common.css" rel="stylesheet" type="text/css" />
    <link href="https://cdn.bootcss.com/Swiper/4.0.6/css/swiper.min.css" rel="stylesheet">
    <link href="https://www.maksdu.com/static/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css">
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script type="text/javascript" src="js/jquery.min.js"></script>
	<script src="https://www.maksdu.com/static/component/footer.js"></script>
	<script src="https://www.maksdu.com/static/component/header.js"></script>
	
</head>
<body>
	<div id="main">
		<section class="aui-flexView">
			<!-- <header class="aui-navBar aui-navBar-fixed" :style="'background-color:'+headerData.titleColor">
				<a href="javascript:void(0)" class="aui-navBar-item" >
					<i class="icon"></i>
				</a>
				<div class="aui-center">
					<span class="aui-center-title">{{ headerData.title }}</span>
				</div>
				<a href="javascript:;" class="aui-navBar-item">
					<i class="fa fa-search fa-fw" style="color:white"></i>
				</a>
			</header> -->
			<vheader :header-data="headerData"></vheader>
			<section class="aui-scrollView">
				<!-- <div class="search-box">
					<div class="search-item">
						<div class="search-input" contenteditable="true" placeholder="查找专区"></div>
						<div class="search-btn">
							<div class="btn">
								<span><i class="fa fa-search"></i>&nbsp; 搜索</span>
							</div>
						</div>
					</div>
				</div> -->
				<div class="view-menu" style="margin-top: 20px;">
					<ul>
						<ol class="menu">
							<li v-for="item in menuList">
								<a v-if="item.hover" class="view-menu-hover" href="#">{{ item.text }}</a>
								<a v-else href="#">{{ item.text }}</a>
							</li>
							<!-- <li><a href="#">推荐</a></li>
							<li><a href="#">经典</a></li>
							<li><a href="#">学习</a></li>
							<li><a href="#">娱乐</a></li> -->
						</ol>
						<ol class="tool">
							<li><a href="#">新建&nbsp;<i class="fa fa-plus-circle fa-fw"></i></a></li>
							<li><a href="#">视图&nbsp;<i class="fa fa-cog fa-fw"></i></a></li>
						</ol>
					</ul>
				</div>
				<div class="view-box">
					<div class="imajor-list">
						<div class="imajor-box" v-for="item in imajors_one">
							<a :href="item.url">
								<div class="imajor-header">
									<img :src="item.path" :alt="item.path"/>
									<div class="imajor-info">
										<div class="name">{{ item.name }}</div>
										<div class="belongs">{{ item.belongs }}</div>
									</div>
								</div>
								<div class="imajor-vtext">	
									<div class="description"><p>{{ item.description }}</p></div>
								</div>
							</a>
						</div>
					</div>
					<div class="imajor-list">
						<div class="imajor-box" v-for="item in imajors_two" >
							<a :href="item.url">
								<div class="imajor-header">
									<img :src="item.path" :alt="item.path"/>
									<div class="imajor-info">
										<div class="name">{{ item.name }}</div>
										<div class="belongs">{{ item.belongs }}</div>
									</div>
								</div>
								<div class="imajor-vtext">	
									<div class="description"><p>{{ item.description }}</p></div>
								</div>
							</a>
						</div>	
					</div>
					
				</div>
			</section>
			<vfooter index="school"></vfooter>
		</section>
	</div>
	<script type="text/javascript">
		
		var newApp = new Vue({
			el: '#main',
			data: {
				'headerData':{
					'titleColor':'#fb7f44',
					'title':'校园专区',
					'icon':true,
					'iconColor':'white',
					'titleIcon':'fa-search',
					'color':'white'
				},
				'imajors':[
					{
						path: 'images/bbqbg.jpg',
						name: '山威投票',
						belongs: '官方专区',
						description: '效仿腾讯投票的投票器，请码客山威的大家让它成长吧',
						url:'https://www.maksdu.com/home/doc/vote.html'
					}
				],
				'imajors_one':[],
				'imajors_two':[],
				menuList: [
					{
						hover: true,
						text: '全部'
					},
					{
						hover: false,
						text: '推荐'
					},
					{
						hover: false,
						text: '经典'
					},
					{
						hover: false,
						text: '学习'
					},
					{
						hover: false,
						text: '娱乐'
					}
				],
			},
			mounted: function() {
				for(var i=0; i< this.imajors.length; i++) {
					if(i%2 == 0) {
						this.imajors_one.push(this.imajors[i]);
					} else {
						this.imajors_two.push(this.imajors[i]);
					}
				}
			}
		})

		
	</script>
</body>
</html>